<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
      .item {
        overflow: hidden;
        padding: 10px;
        width: 400px;
        border: 1px solid red;
      }

      .item img {
        width: 100px;
        float: left;
      }

      .film {
        border: 1px solid black;
        height: 1500px;
      }

      .filminfo {
        width: 300px;
        min-height: 200px;
        background: yellow;
        position: fixed;
        right: 50px;
        top: 100px;
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <button @click="handleAjax">请求数据</button>

      <film-item
        v-for="item in list"
        :key="item.filmId"
        :mydata="item"
      ></film-item>

      <film-detail></film-detail>
    </div>
  </body>
  <script>
    var bus = new Vue();
    // bus.$on();      绑定事件(订阅公众号)
    // bus.$emit();    触发事件(发布公众号文章,触发用户获取最新文章)

    // 公众号
    Vue.component("filmItem", {
      props: ["mydata"],
      template: `
            <div class="item">
                <img :src="mydata.poster" />
                {{mydata.name}}
                <div>
                    <button @click="handleDetail">详情</button>
                </div>
            </div>`,
      methods: {
        handleDetail() {
          console.log(this.mydata.synopsis);
          // 发布公众号文章，触发用户刷新最新数据
          bus.$emit("game", this.mydata.synopsis);
        },
      },
    });

    // 订阅者
    Vue.component("film-detail", {
      data() {
        return {
          info: "",
        };
      },
      // 组件刚刚创建好，就开始订阅
      // 生命周期
      mounted() {
        console.log("当前组件被挂载到 DOM 树");
        bus.$on("game", (data) => {
          console.log("订阅公众号：" + data);
          this.info = data;
        });
      },
      template: `<div class="filminfo">
                      详情--{{info}}
                  </div>`,
    });
    let vm = new Vue({
      el: "#app",
      data: {
        list: [],
      },
      methods: {
        handleAjax() {
          fetch("./json/test.json")
            .then((res) => res.json())
            .then((res) => {
              console.log(res.data.films);
              this.list = res.data.films;
            });
        },
      },
    });
    /*
        通信：
            1. 父传子       属性(直接转账)
            2. 子传父       自定义绑定事件(签到合约)
            3. 表兄侄(画图)  bus (银行)
            4. 多组件之间    vuex 状态管理(支付宝)


    */
  </script>
</html>
